<template>
	<section class="captiontextsstyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<el-form label-width="100px">
						<div class="title">选择风格</div>

						<el-form-item label="背景图片">
							<div class="sd-flex">
								<div class="choice-image choice-image-delete" @click="openFileImage" style="width: 220px; height: 40px">
									<el-image v-if="datas.src != ''" :src="STATIC_URL + datas.src" fit="cover" class="cover-image" />
									<el-icon v-else>
										<ele-Plus />
									</el-icon>

									<div class="delete-content" @click.stop="datas.src = ''" v-if="datas.src != ''">
										<SvgIcon name="ele-DeleteFilled"></SvgIcon>
									</div>
								</div>
							</div>
						</el-form-item>

						<!-- 背景颜色 -->
						<el-form-item label="背景颜色">
							<el-input v-model="datas.bgColor" placeholder="请输入背景颜色">
								<template #append>
									<el-color-picker v-model="datas.bgColor"> </el-color-picker>
								</template>
							</el-input>
						</el-form-item>

						<div class="title">显示设置</div>
						<el-form-item label="位置">
							<el-radio-group v-model="datas.location">
								<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
								<el-radio-button label="left">
									<template #default>
										<span class="icon iconfont icon-horizontal-left"></span>
									</template>
								</el-radio-button>
								<el-radio-button label="center">
									<template #default><span class="icon iconfont icon-juzhong"></span></template>
								</el-radio-button>
							</el-radio-group>
						</el-form-item>

						<el-form-item label="偏移">
							<el-input-number type="number" v-model="datas.skew" />
						</el-form-item>

						<div class="title">标题设置</div>
						<!-- 标题内容 -->
						<el-form-item label="标题内容">
							<el-input v-model="datas.title.text" placeholder="请输入标题" show-word-limit>
								<template #append>
									<el-color-picker v-model="datas.title.color" show-alpha class="picke" :predefine="predefineColors"> </el-color-picker>
								</template>
							</el-input>
						</el-form-item>

						<!-- 标题粗细 -->
						<el-form-item label="字号">
							<el-input-number type="number" v-model="datas.title.textFontSize" :max="100" :min="0" />
						</el-form-item>

						<el-form-item label="其他">
							<el-checkbox-group v-model="datas.title.other">
								<el-checkbox label="bold">加粗</el-checkbox>
								<el-checkbox label="italic">倾斜</el-checkbox>
							</el-checkbox-group>
							<!-- <el-radio-group v-model="datas.title.other">
								<el-radio label="bold"> </el-radio>
								<el-radio label="italic"> </el-radio>
							</el-radio-group> -->
						</el-form-item>

						<div class="title">副标题设置</div>
						<!-- 描述内容 -->
						<el-form-item label="副标题">
							<el-input v-model="datas.subtitle.text" placeholder="请输入副标题">
								<template #append>
									<el-color-picker v-model="datas.subtitle.color" show-alpha class="picke" :predefine="predefineColors"> </el-color-picker>
								</template>
							</el-input>
						</el-form-item>

						<el-form-item label="字号">
							<el-input-number type="number" v-model="datas.subtitle.textFontSize" :max="100" :min="0" />
						</el-form-item>

						<el-form-item label="其他">
							<el-checkbox-group v-model="datas.subtitle.other">
								<el-checkbox label="bold">加粗</el-checkbox>
								<el-checkbox label="italic">倾斜</el-checkbox>
							</el-checkbox-group>
						</el-form-item>

						<div class="title">高度设置</div>

						<!-- 框体高度 -->
						<el-form-item label="框体高度">
							<el-slider v-model="datas.height" :max="200" :min="20" show-input> </el-slider>
						</el-form-item>

						<div class="title">更多设置</div>

						<!--查看更多 -->
						<el-form-item label="显示更多">
							<el-switch v-model="datas.more.show" active-text="显示" inactive-text="隐藏" :active-value="1" :inactive-value="0" />
						</el-form-item>

						<!-- 更多文字 -->
						<el-form-item label="更多文字内容" v-if="datas.more.show == 1">
							<el-input type="text" v-model="datas.more.text" />
						</el-form-item>

						<!-- 跳转链接 -->
						<el-form-item label="跳转地址" v-if="datas.more.show == 1">
							<!-- 输入http -->
							<el-input v-model="datas.more.url">
								<template #append>
									<el-button class="mr5 ml5" @click="openChoiceData">选择</el-button>
								</template>
							</el-input>
						</el-form-item>
					</el-form>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<!-- 表单 -->

		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</section>
</template>

<script setup name="captiontextsstyle">
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));
const FileChoiceRef = ref();

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));
const PageDataRef = ref();

// 	this.$emit('refreshScroll'); 如果需要计算滚动条高度，执行emit
const props = defineProps({
	datas: {},
});

const openFileImage = () => {
	FileChoiceRef.value.openFileChoiceDialog();
};

const choiceFile = (res) => {
	props.datas.src = res[0].visitRelativePath;
};

const openChoiceData = () => {
	PageDataRef.value.openDialog();
};

const choicePage = (res) => {
	props.datas.more.url = res.urlContent;
};
</script>

<style scoped lang="scss">
.captiontextsstyle {
	width: 100%;
	// position: absolute;
	// left: 0;
	// top: 0;
	padding: 0 10px 20px;
	box-sizing: border-box;

	.shop-head-pic {
		color: #ababab;
		display: flex;
		flex-direction: column;
		.home-bg {
			width: 100px;
			height: 100px;
			margin: 10px auto;
		}
		.shop-head-pic-btn {
			display: flex;
			flex-direction: row;
			.el-button {
				flex: 1;
			}
		}
	}
	/* 标题 */
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}

	/* 颜色选择器 */
	.picke {
		float: right;
	}

	/* 位置 */
	.weiz {
		text-align: right;
		i {
			padding: 5px 14px;
			margin-left: 10px;
			border-radius: 0;
			border: 1px solid #ebedf0;
			font-size: 20px;
			font-weight: 500;
			cursor: pointer;

			&:last-child {
				font-size: 22px;
			}

			&.active {
				color: #155bd4;
				border: 1px solid #155bd4;
				background: #e0edff;
			}
		}
	}

	:deep(.wid) .el-form-item__label {
		width: 94px !important;
	}
	:deep(.wid) .el-form-item__content {
		float: right;
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}

:deep(.el-color-picker__trigger) {
	padding: 0px;
}

:deep(.el-color-picker__color) {
	border: 0px;
}
</style>
